var CardForm = function () {
  var CardFormModel = function () {
    BaseModel.call(this);

    var self = this;
    var fn = {
      initData: function () {
        var fields = ['bankCardNumber', 'bank'];
        self.setDataFromObj({}, fields, '');
        self.balance = 0;
      }
    };

    this.getObject = function () {
      var bankCardNumber = this.bankCardNumber;
      bankCardNumber = bankCardNumber.replace(/ /g,'');
      var postData = {
        bankCardNumber: bankCardNumber,
        bank: this.bank
      };

      var balance = this.balance;
      if (balance === undefined) {
        balance = 0;
      }
      postData.balance = balance;

      return postData;
    };

    fn.initData();
  };

  var template = /* html */ `
    <div class="card-form" v-loading.fullscreen.lock="loading">
      <el-form label-width="auto">
        <el-form-item required label="银行卡号">
          <el-input class="form-input" v-model="cardForm.bankCardNumber" placeholder="请输入银行卡号" :disabled="checkLoading"
            :suffix-icon="checkLoading?'el-icon-loading':undefined" @change="cardNumChange"></el-input>
          <div class="el-form-item__error">
            <el-collapse-transition>
              <div v-if="errorMsg!==null">{{errorMsg}}</div>
            </el-collapse-transition>
          </div>
        </el-form-item>
        <el-form-item required label="所属银行">
          <el-input class="form-input" v-model="cardForm.bank"></el-input>
        </el-form-item>
        <el-form-item label="初始金额">
          <el-input-number is-decimal-zero class="form-input" v-model="cardForm.balance" :controls="false" :min="0" :precision="4"
            placeholder="请输入初始金额">
          </el-input-number>
        </el-form-item>
      </el-form>
      <div style="text-align:center">
        <el-button type="primary" @click="addCard">添加</el-button>
      </div>
    </div>
  `;

  return {
    props: {
      card: {
        type: Object
      }
    },

    data: function () {
      return {
        loading: false,
        checkLoading: false,
        cardForm: new CardFormModel(),
        errorMsg: null
      };
    },

    methods: {
      cardNumChange: function () {
        var cardForm = this.cardForm;
        var bankCardNumber = cardForm.bankCardNumber;
        bankCardNumber = bankCardNumber.replace(/ /g,'');
        if (!/\d/.test(bankCardNumber)) {
          this.errorMsg = '银行卡号必须全部是数字';
          return;
        }

        var self = this;
        this.checkLoading = true;
        this.checkCardDetail(bankCardNumber).then(function (data) {
          self.errorMsg = null;
          cardForm.bank = data.bankName;
          self.checkLoading = false;
        }).catch(function (errorMsg) {
          if (errorMsg === '该银行卡不存在') {
            self.errorMsg = null;
          } else {
            self.errorMsg = errorMsg;
          }
          self.checkLoading = false;
        });
      },

      checkCardDetail: function (cardNum) {
          if (cardNum.trim() === '') {
            return Promise.reject('银行卡号不能为空');
          }

          return window.getBankBin(cardNum).then(function (data) {
            return data;
          });
      },

      addCard: function () {
        var errorMsg = this.errorMsg;
        if (errorMsg !== null) {
          this.$alert(errorMsg, '信息');
          return;
        }

        var cardForm = this.cardForm;
        if (cardForm.bankCardNumber.trim() === '') {
          this.$alert('银行卡号不能为空', '信息');
          return;
        }

        if (cardForm.bank.trim() === '') {
          this.$alert('所属银行不能为空', '信息');
          return;
        }

        var self = this;
        this.loading = true;
        var postData = this.cardForm.getObject();
        ajaxRequest('finance/addBank', postData).then(function (msg) {
          self.loading = false;
          self.$alert('银行卡添加成功', '信息', {
            callback: function () {
              self.$emit('save-success');
            }
          });
        }).catch(function () {
          self.loading = false;
        });
      }
    },

    template: template
  };
}();
